import React, { Component } from 'react';
import {
	StyleSheet, View, Text,
	Image, PixelRatio, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';

const scale = GLOBAL.SCALE;
export class CommonSelectList extends Component {
	constructor(props) {
		super(props);
	}

	render () {
		let { data, allClick, styleList, styleBox, checkedIndex, checkItem } = this.props;
		let imgObj = require('../../../imgs/global/correct.png');
		return (
			<TouchableOpacity style={styles.boxShow} onPress={allClick} >
				<View style={[styles.boxList, styleBox]}>
					{data.value.map((item, index) => {
						return (
							<TouchableOpacity onPress={() => { checkItem(item, data.key, index); }} key={index} style={[styles.listSelect, styleList]}>
								<Text style={styles.listSelectText}>{item.value}</Text>
								{checkedIndex === index ? <Image style={styles.listImg} source={imgObj} /> : null}
							</TouchableOpacity>
						)
					})
					}
				</View>
			</TouchableOpacity>
		)
	}
}

const styles = StyleSheet.create({
	boxShow: {
		position: 'absolute',
		zIndex: 9,
		top: 44 * scale,
		width: '100%',
		height: '100%',
		backgroundColor: 'rgba(0,0,0,0.5)'
	},
	boxList: {
		width: '100%',
		paddingLeft: 15 * scale,
		paddingRight: 15 * scale,
		backgroundColor: style.color.white,
	},
	listSelect: {
		height: 50 * scale,
		width: '100%',
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.border,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center'
	},
	listSelectText: {
		color: style.color.dark,
		fontSize: 13 * scale,
		lineHeight: 50
	},
	listImg: {
		width: 13 * scale,
		height: 10 * scale,
	}
})